<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="fullpage/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="fullpage/js/jquery.fullPage.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{margin: 0;padding: 0;list-style: none;}
			.section{
				overflow: hidden;
			}
			.one .log{
				margin-top: 80px;
				width:100% ;
				height: 186px;
				background: url(fullpage/images/logo.png)no-repeat center;
			}
			.one .text{
				margin: 80px 0px;
				text-align: center;
			}
			.one .text img{
				margin: 0px 30px;
				opacity: 0.1;
			}
			.one.current .text img{
				margin: 0px 3px;
				opacity: 1;
				transition: all 1s; 
			}
			.one .last-img{
				text-align: center;
			}
			
			.two>div{
				display: flex;
				text-align: center;
				justify-content: space-around;
			}
			.two .log{
				width: 500px;
				margin-top: 80px;
			}
			.two .info{
				 background: url(fullpage/images/info_2.png);
                 height: 309px;
                 width: 635px;
                 margin-top: 163px;
			}
			.two .log img:nth-child(1){
				transform: translate(380px,430px)
				rotate(135deg);
				
			}
			.two .log img:nth-child(3){
				transform: translate(-380px,130px)
				rotate(27deg);
				
			}
			.two .log img:nth-child(5){
				transform: translate(480px,230px)
				rotate(135deg);

			}
			.two.current .log img{
				transform: translate(0px,0px) rotate(0deg);
				transition: all 1s; 
			}
			.three{
				position: relative; 
			}
			.three .info{
				width: 631px;
				height: 278px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(0,-50%);
				background: url(fullpage/images/info_3.png);
			}
			.three .circle{
				position: absolute;
				left: 60%;
				top: 50%;
				transform: translate(0px,-50%);
			}
			.three .rokict{
				position: absolute;
				left: 10%;
				top:100%;
			}
			.three.current .rokict{
				left: 60%;
				top:50%;
				transform: translate(0,-50%);
				transition: all 1s; 
			}
			
			.four{
				position: relative;
			}
			.four .imgs{
				position: absolute;
				left: 5%;
				top: 50%;
				overflow: hidden;
				transform: translate(0px,-50%);
			}
			.four .imgs .key{
				transform: translate(-100%,0);
			}
			
			.four .imgs .search{
				transform: translate(-100%,0);
				
			}
			.four .imgs .result{
				transform:translateY(-100%)
				
			}
			.four current.imgs .key{
				transform: translate(0,0);
				transition: all 1s;
			}
			
			.four.current .imgs .search{
				transform: translate(0,0);
				transition: all 1s; 
			
			}
			.four.current .imgs .result{
				transform: translateY(0);
				transition: all 1s; 
				transition-delay: 2s;
			}
			.four .info{
				width: 612px;
    			height: 299px;
    			position: absolute;
    			background: url(fullpage/images/info_4.png);
    			left: 50%;
    			top: 50%;
    			transform: translate(0%,-50%);
			}
			
			
			.five{
				position: relative;
			}
			.five .info{
				height: 135px;
    			margin: 30px 0;
    			background: url(fullpage/images/info_5.png)center center no-repeat;
			}
			.five .broswer{
				width: 1004px;
			    margin: 0 auto;
			    height: 560px;
			    background-color: rgba(255, 255, 255, 0.15);
			    position: relative;
			    overflow: hidden;
			    
			}
			.five .broswer .lineleft{
				position: absolute;
				left: 0;
			    height: 100%;
			    border-left: 1px solid rgba(255, 255, 255, 0.5);
			    border-color: rgba(255, 255, 255, 0.5) ;
			}
			.five.current .broswer .lineleft{
				transition: all 1s ease-in-out;
			    transform: translateY(0); 
			    opacity: 1;
			}
			.five .broswer .toolbar{
				height: 80px;
			    background: url(fullpage/images/toolbar.png) left bottom no-repeat;
			    position: relative;
			    opacity: 1;
			}
			.five .broswer .line{
				position: absolute;
				bottom: 30px;
				width: 100%;
				border-top: 1px solid rgba(255, 255, 255, 0.5);
			}
			.five .broswer .extra{
				position: absolute;
			    right: 0;
			    bottom: 0;
			    width: 394px;
			    height: 29px;
			    background: url(fullpage/images/extra.png);
			    opacity: 0;
			}
		</style>
		<script type="text/javascript">
		$(function(){
  			$('.content').fullpage({
  				sectionsColor:['#0da5d6','#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
  				afterLoad:function(afterlink,index){
  					$(".section").removeClass("current");

                    setTimeout(function(){
                        $(".section").eq(index-1).addClass("current");
                	},100);
  				
  				}
  				
  			});
  			
		});
		</script>
		
	</head>
	<body>
		<div class="content">
			
			<div class="section one">
				<div class="log">
				</div>
				<div class="text">
					<img src="fullpage/images/text_1.png"/>
					<img src="fullpage/images/text_2.png"/>
					<img src="fullpage/images/text_3.png"/>
					<img src="fullpage/images/text_4.png"/>
					<img src="fullpage/images/text_5.png"/>
					<img src="fullpage/images/text_6.png"/>
					<img src="fullpage/images/text_7.png"/>
					<img src="fullpage/images/text_8.png"/>
				</div>
				<div class="last-img">
					<img src="fullpage/images/info_1.png"/>
				</div>
			</div>
			<div class="section two">
				<div class="log">
					<img src="fullpage/images/shield_1.png"/>
					<img src="fullpage/images/shield_2.png"/>
					<img src="fullpage/images/shield_3.png"/>
					<img src="fullpage/images/shield_4.png"/>
					<img src="fullpage/images/shield_5.png"/>
					<img src="fullpage/images/shield_6.png"/>
					<img src="fullpage/images/shield_7.png"/>
					<img src="fullpage/images/shield_8.png"/>
					<img src="fullpage/images/shield_9.png"/>
				</div>
				<div class="info"></div>
			</div>
			
			
			<div class="section three">
				<div class="info"></div>
				<div class="circle">
					<img src="fullpage/images/circle.png"/>
					
				</div>
				<div class="rokict">
						<img src="fullpage/images/rocket.png"/>
				</div>
			</div>
			
			
			<div class="section four">
				<div class="imgs">
					<div class="key">
						<img src="fullpage/images/key.png"/>
					</div>
					<div class="search">
						<img src="fullpage/images/search.png"/>
					</div>
					<div class="result">
						<img src="fullpage/images/result.png"/>
					</div>
				</div>
				<div class="info"></div>
			</div>
			
			
			<div class="section five">
				<div class="info"></div>
				<div class="broswer">
					<div class="lineleft"></div>
					<div class="lineright"></div>
					<div class="linetop"></div>
					<div class="linebottom"></div>
					<div class="toolbar"></div>
					<div class="line">
						
					</div>
					<div class="extra">
						
					</div>
				</div>
			</div>

		</div>
	</body>
</html>
